import React from 'react';
import MUtil from 'util/MUtil.jsx';
const mUtil = new MUtil();
import ProductService from 'service/ProductService.jsx';
const productService = new ProductService();

class CategorySelector extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      firstCategoryList: [],
      firstCategoryId: 0,
      secondCategoryList: [],
      secondCategoryId: 0,
    };
  }

  componentDidMount() {
    this.loadFirstCategory();
  }

  componentWillReceiveProps(nextProps) {
    let categoryIdChange = this.props.categoryId !== nextProps.categoryId,
      parentCategoryIdChange = this.props.parentCategoryId !== nextProps.parentCategoryId;
    if (!categoryIdChange && !parentCategoryIdChange) { // 如果两者都没有变，则不需要更新组件
      return false;
    }
    if (nextProps.parentCategoryId == 0) { // 假如只有一级品类
      this.setState({
        firstCategoryId: nextProps.categoryId,
        secondCategoryId: 0,
      })
    } else { // 有两级品类
      this.setState({
        firstCategoryId: nextProps.parentCategoryId,
        secondCategoryId: nextProps.categoryId
      }, () => {
        categoryIdChange && this.loadSecondCategory(); // 如果二级品类发生了变化，则执行更新
      });
    }

  }

  /**
   * 加载一级品类
   */
  loadFirstCategory() {
    productService.getCategoryList()
      .then(res => {
        this.setState({
          firstCategoryList: res.data,
        })
      },
        errMsg => mUtil.errorTips(errMsg));
  }

  /**
   * 加载二级品类
   */
  loadSecondCategory() {
    productService.getCategoryList(this.state.firstCategoryId)
      .then(res => {
        this.setState({
          secondCategoryList: res.data,
        })
      },
        errMsg => mUtil.errorTips(errMsg));
  }

  /**
   * 传给父组件选中的结果
   */
  onPropsCategoryChange() {
    // 判断父组件是否提供了onCategoryChange方法
    let callbackEnable = typeof this.props.onCategoryChange === 'function';
    if (callbackEnable) {
      if (this.state.secondCategoryId) { // 是否选择了二级品类
        this.props.onCategoryChange(this.state.secondCategoryId, this.state.firstCategoryId);
      } else { // 只选择了一级品类
        this.props.onCategoryChange(this.state.firstCategoryId, 0);
      }
    }
  }

  onFirstCategoryChange(e) {
    if (this.props.readOnly) return;
    let firstCategoryId = e.target.value;
    this.setState({
      firstCategoryId,
      secondCategoryId: 0, // 重置二级品类
      secondCategoryList: [], // 重置二级品类
    }, () => {
      // 更新二级品类
      this.loadSecondCategory();
      this.onPropsCategoryChange();
    });
  }

  onSecondCategoryChange(e) {
    if (this.props.readOnly) return;
    let secondCategoryId = e.target.value;
    this.setState({ secondCategoryId }, () => {
      this.onPropsCategoryChange();
    });
  }

  render() {
    return (
      <div className="col-md-10">
        <select className="form-control case-select"
          value={this.state.firstCategoryId}
          onChange={e => this.onFirstCategoryChange(e)}
          readOnly={this.props.readOnly}>
          <option value="">请选择一级分类</option>
          {
            this.state.firstCategoryList.map((category, index) => <option key={index} value={category.id}>{category.name}</option>)
          }
        </select>
        {this.state.secondCategoryList.length > 0 ? (
          <select className="form-control case-select"
            value={this.state.secondCategoryId}
            onChange={e => this.onSecondCategoryChange(e)}
            readOnly={this.props.readOnly}>
            <option value="">请选择二级分类</option>
            {
              this.state.secondCategoryList.map((category, index) => <option key={index} value={category.id}>{category.name}</option>)
            }
          </select>) : null
        }
      </div>
    );
  }
}

export default CategorySelector;